<template>
  <el-container>
    <el-header
      style="
        background-color: rgb(0, 255, 255);
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div class="title"></div>
      <el-menu
        style="width: 100%; background-color: rgb(0, 255, 255)"
        mode="horizontal"
      >
        <el-menu-item
          :index="item.key"
          v-for="item in menuList"
          :key="item.key"
        >
          {{ item.label }}
        </el-menu-item>
      </el-menu>
      <el-button type="danger">登出</el-button>
    </el-header>
    <el-main>Main</el-main>
  </el-container>
</template>

<script setup>
import { ref } from '@vue/reactivity';

const menuList = ref([
  { label: '主页', key: 'mainPage' },
  { label: '写笔记', key: 'write' },
  { label: '笔记列表', key: 'noteList' },
]);
</script>

<style lang="scss" scoped>
:deep(.el-container) {
  height: 100%;
}
.title {
  width: 40px;
  height: 40px;
  border: 1px solid rgb(116, 115, 115);
  border-radius: 50%;
  margin-right: 10px;
}
:deep(.el-menu) {
  border-bottom: none;
  .el-menu-item.is-active {
    border: none;
  }
}
</style>
